<template>
  <div class="conponent">
    <div class="loginhome">
    <div class="imgbox">
      <div class="logo"><img src="../assets/logo.jpg" alt="" /></div>
      <div class="bcc"><img src="../assets/loginimg.jpg" alt="" /></div>
    </div>
    <div class="mylogin">
      <h1>后台管理系统</h1>
      <h3>管理员登录</h3>
      <div class="loginbox">
        <div class="uaccount">
          <input type="text" placeholder="请输入账号" v-model="phone"/>
        </div>
        <div class="upassword">
          <input type="password" placeholder="请输入密码" v-model="passWord" />
        </div>
        <div class="login">
            <button @click="tologin">登录</button>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import {adminloginFunc} from "../http/request"
export default {
  data() {
    return {
      phone: "",
      passWord: "",
    };
  },
  methods:{
        async tologin() {
      if (this.phone.length == 0 || this.passWord.length == 0) {
        alert("输入框不能为空");
      } else {
        if (this.phone.length != 11) {
          alert("请输入正确的手机号码");
        } else {
        await  adminloginFunc("/user/adminlogin", {
            phone: this.phone,
            passWord: this.passWord,
          }).then((response) => {
            console.log(response);
            // 解构赋值
            let {token,phone,userName,passWord,id} = response;
            // console.log(this.$store)
            // this.$store.dispatch('user/setPhoneAsync',phone);
            // this.$store.dispatch('user/setUserNameAsync',userName);
            // this.$store.dispatch('user/setIdAsync',id);
            // 本地储存token
            localStorage.setItem('token',token);
            localStorage.setItem('phone',phone);
            localStorage.setItem('userName',userName);
            localStorage.setItem('id',id);
            if(this.passWord != passWord){
              alert("输入的密码错误,请重新登录");
            }else{
              alert("登录成功");
              // 跳转页面
              this.$router.push({name:'home',params: { phone,userName}})
            }
          });
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.conponent{
  width: 1450px;
  margin: 0 auto;
  .loginhome {
  display: flex;
  .imgbox {
    width: 1000px;
    .logo {
      width: 1000px;
      img {
        width: 1000px;
      }
    }
    .bcc {
      width: 1000px;
      img {
        width: 1000px;
      }
    }
  }
  .mylogin {
    // background-color: aliceblue;
    // height: 1500px;
    // padding-top: 150px;
    text-align: center;
    h1 {
      font-weight: normal;
      margin-top: 20px;
    }
    h3 {
      margin-top: 100px;
    }
    .loginbox {
      margin-left: 50px;
      input {
        width: 400px;
        height: 50px;
        margin-top: 20px;
        border-radius: 10px;
        padding-left: 10px;
        border: gray;
        outline: none;
        color: #276da6;
        background-color: #e4e4e4;
      }
      button {
        width: 100px;
        height: 50px;
        border-radius: 10px;
        margin-top: 20px;
        cursor: pointer;
        background-color: #92CBFE;
        border: gray;
      }
      .haveaccount {
        margin-top: 10px;
        a {
          color: #276da6;
        }
      }
    }
  }
}
}
</style>